/**
 * 选择用户头像的UI组件
 */
import React from 'react'
import { List, Grid } from 'antd-mobile'
import PropTypes from 'prop-types'
export default class HeaderSelector extends React.Component {
  static propTypes = {
    setHeader: PropTypes.func.isRequired
  }
  state = {
    icon: null //图片对象
  }

  handleClick = ({ text, icon }) => {
    //   更新当前组件状态
    this.setState({ icon })
    //  更新父组件状态
    this.props.setHeader(text)
  }

  constructor(props) {
    super(props)
    this.headerList = []
    for (let i = 0; i < 20; i++) {
      this.headerList.push({
        text: '头像' + (i + 1),
        icon: `http://119.3.254.20:3000/public/images_react/头像${i + 1}.png`
      })
    }
  }
  render() {
    const { icon } = this.state
    const listHeader = icon ? (
      <div>
        已选择头像 <img src={icon} alt="头像" />
      </div>
    ) : (
      '请选择头像'
    )
    return (
      <List renderHeader={() => listHeader}>
        <Grid
          onClick={el => this.handleClick(el)}
          columnNum={5}
          data={this.headerList}
        ></Grid>
      </List>
    )
  }
}
